<template>
  <div class="edit">
    <!-- 1.0 头部导航结构 -->
    <van-nav-bar
      title="个人信息编辑"
      left-arrow
      @click-left="$router.back()"
      @click-right="$router.push({ path: '/' })"
    >
      <template #right>
        <van-icon
          name="wap-home-o"
          color="#f00"
          size="6vw"
        />
      </template>
    </van-nav-bar>
    <!-- 2.0 头像 -->
    <div class="avatar">
      <div class="avatar-img">
        <!-- vant 的上传组件 - 支持插槽 -->
        <van-image
          round
          fit="cover"
          width="100%"
          height="100%"
          :src="userinfo.head_img"
        />
      </div>
      <van-uploader :after-read="afterRead"></van-uploader>
    </div>
    <!-- 3.0 单元格 -->
    <!-- @click 点击事件其实可以写多行代码，用分号; 隔开即可 -->
    <MyCell
      title="昵称"
      :value="userinfo.nickname"
      @click=" nicknameShow = true; nicknameTemp = userinfo.nickname"
    ></MyCell>
    <MyCell
      title="密码"
      value="*******"
      @click=" passwordShow = true; passwordNew = ''; passwordOld = '' "
    ></MyCell>
    <MyCell
      title="性别"
      :value="userinfo.gender ? '男' : '女'"
      @click="genderShow = true"
    ></MyCell>
    <!-- 4.0 所有的弹出框放到页面底部，避免嵌套时出现定位错乱的问题 -->
    <van-dialog
      v-model="nicknameShow"
      title="修改昵称"
      show-cancel-button
      @confirm="nicknameFn"
    >
      <!-- 记得在 main 里面导入表单结构 -->
      <van-field
        required
        v-model="nicknameTemp"
        label="文本"
        placeholder="请输入用户名"
      />
    </van-dialog>
    <!-- 修改密码的模态框 -->
    <van-dialog
      v-model="passwordShow"
      title="修改密码"
      show-cancel-button
      :before-close="beforeClose"
    >
      <van-field
        required
        v-model="passwordOld"
        label="原密码"
        placeholder="请输入原密码"
      />
      <van-field
        required
        v-model="passwordNew"
        label="新密码"
        placeholder="请输入新密码"
      />
    </van-dialog>
    <!-- ActionSheet 动作面板 -->
    <van-action-sheet
      v-model="genderShow"
      :actions="[{ name: '男' , gender: 1 }, { name: '女', gender: 0 }]"
      cancel-text="取消"
      close-on-click-action
      @select="genderFn"
    />
  </div>
</template>

<script>
// this.$router.back()  可以实现返回
import MyCell from "../components/MyCell.vue";
import { userDetailByIdAPI, userUpdateByIdAPI } from "../apis/user";
import { uploadFileAPI } from "../apis/index";
import request from "../utils/request.js";
export default {
  components: {
    MyCell,
  },
  data() {
    return {
      userinfo: {},
      // 用户昵称
      nicknameShow: false,
      nicknameTemp: "",
      // 用户密码
      passwordShow: false,
      passwordNew: "",
      passwordOld: "",
      // 性别
      genderShow: false,
    };
  },
  async created() {
    // 通过 Vue 调试工具可以更方便找到 id 到底是在那个对象上存储
    const id = this.$route.query.id;
    // 💥 检查是否成功获取到 id
    // 根据 id 获取用户信息
    if (!id) return this.$toast.fail("没有用户id");
    const res = await userDetailByIdAPI(id);
    // 💥 检查是否成功获取到用户数据
    console.log(res);
    // 获取用户头像是相对路径，需要拼接请求基地址
    // 拼接后赋值给自己
    // 💥 检查是否获取到数据
    if (res.data.data) {
      res.data.data.head_img =
        request.defaults.baseURL + res.data.data.head_img;
      // 把处理后的数据绑定到 data 中，再用于页面展示
      this.userinfo = res.data.data;
    }
  },
  methods: {
    // file 就是选择的文件对象
    async afterRead(file) {
      // 此时可以自行将文件上传至服务器
      console.log(file);
      // 上传需要用 FormData 的方式
      const fd = new FormData();
      fd.append("file", file.file);
      // 传进入的参数是一个 FormData 对象
      const res = await uploadFileAPI(fd);
      console.log(res);
      // 判断文件是否真的上传成功
      if (res.data.message === "文件上传成功") {
        // 获取图片地址
        const imgUrl = res.data.data.url;
        // 把新的图片地址，更新到用户信息中
        const res2 = await userUpdateByIdAPI(this.$route.query.id, {
          head_img: imgUrl,
        });
        // 更新头像的展示
        this.userinfo.head_img =
          request.defaults.baseURL + res2.data.data.head_img;
        // console.log(res2);
        this.$toast.success("用户头像更新成功");
      }
    },
    // 修改用户昵称
    async nicknameFn() {
      // console.log("666666666666,你点了确定按钮");
      // 获取输入框的用户昵称
      if (this.nicknameTemp === "") return this.$notify("请输入昵称，不能为空");
      // 发送请求更新用户昵称
      const res = await userUpdateByIdAPI(this.$route.query.id, {
        nickname: this.nicknameTemp,
      });
      // console.log(res);
      this.userinfo.nickname = res.data.data.nickname;
      this.$toast.success("昵称更新成功");
    },
    // // 修改用户密码
    // passwordFn() {
    //   console.log("确认修改密码");
    // },
    // 关闭弹出框前自动执行的回调函数，需要在组件上添加 before-close
    async beforeClose(action, done) {
      // console.log(action, done);
      // 如果点击的是确定按钮
      if (action === "confirm") {
        // 检查：用户输入的原密码是否正确
        if (
          this.passwordOld === this.userinfo.password &&
          /^[a-zA-Z0-9~!@#$%^&*_+=-]{3,18}$/.test(this.passwordNew)
        ) {
          // console.log("原密码输入正确，新密码也合法，可以走更新逻辑了");
          // 🔔 主动关闭弹窗
          done();
          // 发送请求更新密码
          const res = await userUpdateByIdAPI(this.$route.query.id, {
            password: this.passwordNew,
          });
          // console.log(res);
          // 如果修改成功，提示用户
          if (res.data.message === "修改成功") {
            // 由于页面没有刷新，所以修改后的密码也要做一下数据的同步
            this.userinfo.password = this.passwordNew;
            this.$toast.success("密码修改成功");
          }
        } else {
          // console.log("原密码输入错误了~~~");
          // 🔔 阻止弹窗关闭。done(false)
          done(false);
          // 轻提示
          this.$toast.fail("原密码错误\n或\n新密码不合法");
        }
      } else {
        // 🔔 主动关闭弹窗
        done();
      }
    },
    // 编辑性别
    async genderFn(item) {
      // console.log("你点击了选项", item);
      const res = await userUpdateByIdAPI(this.$route.query.id, {
        gender: item.gender,
      });
      console.log(res);
      if (res.data.message === "修改成功") {
        // 轻提示
        this.$toast.success("性别更新成功");
        // 不刷新页面，还要同步一下视图的数据
        this.userinfo.gender = res.data.data.gender;
      }
    },
  },
};
</script>

<style lang="less" scoped>
.avatar {
  height: 200px;
  display: flex;
  justify-content: center;
  align-items: center;
  background-color: #eee;
  .avatar-img {
    width: 100px;
    height: 100px;
  }
}
// 把 van-uploader 通过定位盖到图片上
.van-uploader {
  position: absolute;
  opacity: 0;
}
</style>